<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Custom Plugin Examples</title>
    <style>
        form {
            margin: 0;
        }

        textarea {
            display: block;
        }

        .ke-icon-example1 {
            background-image: url(../themes/default/default.gif);
            background-position: 0px -672px;
            width: 16px;
            height: 16px;
        }

        .ke-icon-example2 {
            background-image: url(../themes/default/default.gif);
            background-position: 0px -672px;
            width: 16px;
            height: 16px;
        }
    </style>
    <link rel="stylesheet" href="../themes/default/default.css"/>
    <script charset="utf-8" src="../kindeditor-min.js"></script>
    <script charset="utf-8" src="../lang/zh_CN.js"></script>
    <script>
        // 自定义插件 #1
        KindEditor.lang({
            example1: '插入HTML'
        });
        KindEditor.plugin('example1', function (K) {
            var self = this, name = 'example1';
            self.clickToolbar(name, function () {
                self.insertHtml('<strong>测试内容</strong>');
            });
        });
        // 自定义插件 #2
        KindEditor.lang({
            example2: 'CLASS样式'
        });
        KindEditor.plugin('example2', function (K) {
            var self = this, name = 'example2';

            function click(value) {
                var cmd = self.cmd;
                if (value === 'adv_strikethrough') {
                    cmd.wrap('<span style="background-color:#e53333;text-decoration:line-through;"></span>');
                } else {
                    cmd.wrap('<span class="' + value + '"></span>');
                }
                cmd.select();
                self.hideMenu();
            }

            self.clickToolbar(name, function () {
                var menu = self.createMenu({
                    name: name,
                    width: 150
                });
                menu.addItem({
                    title: '红底白字',
                    click: function () {
                        click('red');
                    }
                });
                menu.addItem({
                    title: '绿底白字',
                    click: function () {
                        click('green');
                    }
                });
                menu.addItem({
                    title: '黄底白字',
                    click: function () {
                        click('yellow');
                    }
                });
                menu.addItem({
                    title: '自定义删除线',
                    click: function () {
                        click('adv_strikethrough');
                    }
                });
            });
        });
        KindEditor.ready(function (K) {
            K.create('#content1', {
                cssPath: ['../plugins/code/prettify.css', 'index.css'],
                items: ['source', 'removeformat', 'example1', 'example2', 'code']
            });
        });
    </script>
</head>
<body>
<h3>自定义插件</h3>
<textarea id="content1" name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>
</body>
</html>
